<template>
    <div id="myCenter">
          <!-- 未登录状态 -->
        <div id="head" v-if="this.user==null">
            <img id="myHeadIcon" src="../assets/share.png"/></br>
            <input type="button" class="registerAndEntry" value="注册" @click="openregister"/>
            <span id="span1">|</span>
            <input type="button" class="registerAndEntry" value="登录" @click="openlogin"/>
       </div>
         <!-- 登录状态 -->
         <div id="head" v-if="this.user!==null">
     
            <img id="myHeadIcon" src="../assets/share.png"/></br>
                <br> 
           <span>用户名：{{user}}</span>
          <span>
       </div>
       
         <!-- 个人资料区 -->


        <div id="myThings">
             <mt-cell title="我的资料" icon="more" is-link to="/mineSetting">
                <span></span>
                <img slot="icon" src="../assets/mine/mineedit.jpg" width="35" height="35">
            </mt-cell>
           
            <mt-cell title="我的发表" icon="more" is-link to="/minepassage">
                <span></span>
                <img slot="icon" src="../assets/mine/minequestion.jpg" width="35" height="35">
            </mt-cell>
            <mt-cell title="我的评论" icon="more" is-link to="/minecriteria">
                <span></span>
                <img slot="icon" src="../assets/mine/minecomment.jpg" width="35" height="35">
            </mt-cell>
        
           
             <mt-cell v-if="usn==admin" title="管理员界面" icon="more" is-link to="/Boss" >
                <span></span>
                <img slot="icon" src="../assets/mine/shoucang.png" width="35" height="35">
            </mt-cell>
          
        </div>
  <div class="find-change-geshi"></div>
                <!-- 登出按钮 -->
           <mt-button  v-if="user!==null" id="logOff"  @click="loginout">登出</mt-button>
    </div>
</template>

<script>
import Vue from 'vue';

    export default {
        name:'myCenter',
        data () {
            return {
                showRegister : false,
                show:true,
                user:sessionStorage.getItem("username")
            }
        },
        computed:{
        },
        methods:{
            // 登出
            loginout(){
                 sessionStorage.removeItem("username");
              console.log("退出登录")
             this.$router.push({path:'/login'})
            },
        //   打开登录页面
            openlogin(){
 
             this.$router.push({path:'/login'})

            },
            // 打开注册页面
            openregister(){
    
             this.$router.push({path:'/register'})

            }
        },
        watch:{
      
                
           
         }
         }
        
    
</script>

<style>
/*head*/
#head{
    width:100%;
    height:155px;
    background-color:rgb(254,0,0);
    text-align:center;
}

#myHeadIcon{
    width:100px;
    height:100px;
    margin-top:10px;
  
}

.registerAndEntry{
    width: 40px;
    height: 30px;
    background-color: rgb(254,0,0);
    font-size: 18px;
    font-family:"黑体";
    color:white;
    border:none;
    margin-top:5px;
}

#span1{
    color:white;
    font-weight:bolder;
}

/*body*/
#myThings{
    margin-top:5px;
}

#myThings .mint-cell-wrapper{
    line-height: 3.4;
}

#myThings .mint-cell-text{
    margin-left:10px;
}
.find-change-geshi{
    width: 100%;
    height: 125px;
}
.mint-cell-title{
    text-align:left;
    margin-left:5px;
}

/*register*/
.popupcontent{
    width:320px;
    height:450px;
}

.popup-content img{
    width:100px;
}

#registerForm{
    margin-top:14px;
}

#registerForm p{
    margin-top:0px;
    text-align: center;
}

.rform{
    height:35px;
    font-size: 16px;
}

#registerButton{
    background-color: #0dcac6;
    color: white;
    width: 100px;
    margin-top:15px;
}

#backButton{
    border: 1px solid darkgray;
    width: 100px;
}
#logOff{
    width: 100%;
    height: 42px;
    border:none;
    background-color:rgb(254,0,0);
    color:white;
    font-size:20px;
    border-radius: 5px;
    margin-top: 15px;
}
</style>